<template>
  <view class="bg-white">
    <view class="disFlxAC px-16 py-12 header" @click="toRecord">
      <text class="flex-1 fz-16 default-color font-bold">秘书处撮合</text>
      <template v-if="data">
        <text class="fz-14 color ml-10">撮合记录</text>
        <text class="ali-icon color ml-4">&#xe67b;</text>
      </template>
    </view>

    <view class="pa-16">
      <!-- 未申请 -->
      <view v-if="!data" class="disFlxCC">
        <view class="color fz-14 mb-12"><text>您暂未申请秘书处撮合</text></view>
        <TButton
          text="申请秘书处撮合"
          type="primary"
          class="gutter-btn"
          custom-class="h-32 linh-32 br-16"
          :disabled="status === IntentionStatusEnum.unsuitable"
          @click="handleApplication"
        />
      </view>
      <!-- 申请成功 -->
      <view v-else-if="data?.list?.length">
        <view class="fz-16 default-color font-bold"><text>秘书处撮合意见</text></view>
        <template v-for="item in data.list" :key="item.id">
          <view class="mt-12">
            <OpinionCard :item="item" />
          </view>
        </template>
      </view>
      <!-- 对方申请中 -->
      <view v-else-if="!data?.isSelfInitiated" class="disFlxCC">
        <view class="color2 fz-14 mb-12"><text>对方申请撮合中……</text></view>
        <TButton
          text="申请秘书处撮合"
          type="primary"
          class="gutter-btn"
          disabled
          custom-class="h-32 linh-32 br-16"
        />
      </view>
      <!-- 己方申请中 -->
      <template v-else>
        <view class="mb-12">
          <MatchingItem :id="data.boUserApplyRecordTypeId" :status="data.flowStatus" />
        </view>
        <view
          v-if="
            status !== IntentionStatusEnum.unsuitable &&
            (data.flowStatus === MatchingStatusEnum.secretariatUnsuitable ||
              data.flowStatus === MatchingStatusEnum.brokerUnsuitable)
          "
          class="disFlxCC"
        >
          <TButton
            text="再次申请撮合"
            type="primary"
            class="gutter-btn"
            custom-class="h-32 linh-32 br-16"
            @click="handleApplication"
          />
        </view>
      </template>
    </view>
  </view>
</template>

<script setup lang="ts">
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import OpinionCard from './OpinionCard.vue';
  import { navigateTo } from '@/router';
  import MatchingItem from '../../components/MatchingItem.vue';
  import type { PropType } from 'vue';
  import type { IIntentionApplyRecordDetailsResult } from '@/api/businessOpportunities/type';
  import {
    ApplicationTypeEnum,
    IntentionStatusEnum,
    MatchingStatusEnum,
  } from '@/enums/businessOpportunitiesEnum';
  import { propTypes } from '@/utils/propTypes';
  import type { IntentionDetails } from '@/router/types/modules';

  const props = defineProps({
    /** 供需id */
    boInfoId: propTypes.number,
    /** 意向申请id */
    applyRecordId: propTypes.number,
    /** 意向申请状态 */
    status: Number as PropType<IntentionStatusEnum>,
    /** 撮合相关数据 */
    data: Object as PropType<IIntentionApplyRecordDetailsResult['boUserApplySecreariatVo']>,
    /** 意向详情类型 */
    type: String as PropType<IntentionDetails['type']>,
  });

  /** 申请撮合 */
  function handleApplication() {
    navigateTo({
      name: 'requestAdminMatch',
      options: {
        id: props?.boInfoId,
        type: ApplicationTypeEnum.match,
        isIntendedRecipient: props.type === 'received',
        boUserApplyRecordId: props.applyRecordId
      },
    });
  }

  function toRecord() {
    props.data &&
      navigateTo({
        name: 'applicationMatchingRecord',
        options: { id: props.applyRecordId },
      });
  }
</script>

<style lang="scss" scoped>
  .header {
    border-bottom: 1px solid #ebedf0;
  }
  .color {
    color: #969799;
  }

  .color2 {
    color: #e29942;
  }
</style>
